<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="6">
                <div class="container" style="background:#09f">
                    <div class="title">
                        <span>用户统计</span>
                        <el-tag type="success" size="mini">实时</el-tag>
                    </div>
                    <div class="num">{{totalUser}}</div>
                    <div class="tip">当前总用户数量</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="container" style="background:#09f">
                    <div class="title">
                        <span>商品统计</span>
                        <el-tag type="info" size="mini">实时</el-tag>
                    </div>
                    <div class="num">{{totalGoods}}</div>
                    <div class="tip">当前总商品数量</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="container" style="background:#09f">
                    <div class="title">
                        <span>订单统计</span>
                        <el-tag type="warning" size="mini">实时</el-tag>
                    </div>
                    <div class="num">{{totalOrders}}</div>
                    <div class="tip">当前总订单数量</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="container" style="background:#09f">
                    <div class="title">
                        <span>销售统计</span>
                        <el-tag type="primary" size="mini">实时</el-tag>
                    </div>
                    <div class="num">{{totalSales}}</div>
                    <div class="tip">当前总销售额(元)</div>
                </div>
            </el-col>
        </el-row>

    <!-- Echarts图表 -->
    <div class="echarts-container">
        <el-card id="chart1"></el-card>
        <el-card id="chart2"></el-card>
    </div>

    </div>
</template>
<script>
import echarts from 'echarts'
export default {
   data() {
      return {
          totalUser:0,
          totalGoods:0,
          totalOrders:0,
          totalSales:0,
          orderList:[]
      }
   },
   created(){
       this.getUsersList(),
       this.getGoodsList(),
       this.getOrdersList()
   },
   computed:{
   },
   methods:{
       //获取用户列表
       async getUsersList(){
           const{data:res}=await this.$http.get('users',{
               params:{pagenum:1,pagesize:5}
           })
        //    console.log(res)
           if(res.meta.status!==200){
            return this.$message.error('获取用户列表失败')
           }
        //    this.$message.success('获取用户列表成功')
           this.totalUser=res.data.total
       },
       //获取商品列表
       async getGoodsList(){
           const{data:res}=await this.$http.get('goods',{
               params:{pagenum:1,pagesize:5}
           })
        //    console.log(res)
           if(res.meta.status!==200){
            return this.$message.error('获取商品列表失败')
           }
        //    this.$message.success('获取商品列表成功')
           this.totalGoods=res.data.total
       },
       //获取订单列表
       async getOrdersList(){
           const{data:res}=await this.$http.get('orders',{
               params:{pagenum:1,pagesize:5}
           })
        //    console.log(res)
           if(res.meta.status!==200){
            return this.$message.error('获取订单列表失败')
           }
        //    this.$message.success('获取订单列表成功')
           this.totalOrders=res.data.total
           this.orderList=res.data.goods
           //计算销售额
           this.orderList.forEach(item => {
               if(item.pay_status==='1'){
                   this.totalSales+=item.order_price
               }
           });
           //展示图表
           this.initChat1()
           this.initChat2()
       },
       initChat1(){
           var chart1=echarts.init(document.getElementById('chart1'))
           var option = {
	title: {
		text: '订单趋势',
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'line',
		},
	},
	xAxis: {
		type: 'category',
		data: [], // ['03.20', '03.21'],
	},
	yAxis: {
		type: 'value',
	},
	series: [
		{
			type: 'line',
			smooth: true,
			data: [], // [260, 406]
		},
	],
}
//升序排序
this.orderList.sort(function(a,b){
    return a.create_time-b.create_time
})
// 获取日期及订单总额
      let data = []
      this.orderList.forEach((item) => {
        if (item.pay_status === '1') {
          let key = this.$utils.formatToDate(item.create_time)
          if (!data[key]) {
            data[key] = item.order_price
          } else {
            data[key] += item.order_price
          }
        }
      })

      // 将数据添加到option中
      for (var key in data) {
        option.xAxis.data.push(key)
        option.series[0].data.push(data[key])
      }

      chart1.setOption(option)
    },
    initChart2() {
      var chart2 = echarts.init(document.getElementById('chart2'))

      var option = {
        title: {
          text: '订单状态',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: [],
        },
        series: [
          {
            name: '订单状态',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }

      /**
       *  对数据进行处理
       */
      var data = [
          {
              name:'已付款',
              value:0
          },
          {
              name:'未付款',
              value:0
          }
      ]

      this.orderList.forEach(item => {
          if(item.pay_status === '1'){
              data[0].value++
          }else{
              data[1].value++
          }
      })

      console.log(data)
      for(var item of data){
          option.legend.data.push(item.name)
          option.series[0].data.push(item)
      }

      chart2.setOption(option)
    },
           
       
       
   },
}
</script>
<style lang="less" scoped>
.container{
    height: 80px;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #000;
    .title{
        font-size: 10px;
        padding: 3px 5px;
        display: flex;
        justify-content: space-between;

    }
    .num{
        text-align: center;
        font-weight: bold;
        font-size: 20px;
    }
    .tip{
        font-size: 8px;
        padding: 5px ;
    }
}
.echarts-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .el-card {
    height: 400px;
    width: 50%;
    margin: 0 8px;
    padding: 20px;
  }
}
</style>
